<script setup lang="ts">

import ApiKeyList from '@/views/user/apikey/ApiKeyList.vue';
import UserInfo from '@/views/user/info/UserInfo.vue';
import InviteRecordList from '@/views/user/info/InviteRecordList.vue';
</script>

<template>
<div>
  <div class="user-info">
    <el-tabs tab-position="left" style="height: 70%; ">
      <el-tab-pane label="个人信息">
        <UserInfo/>
      </el-tab-pane>
      <el-tab-pane label="API密钥">
        <ApiKeyList/>
      </el-tab-pane>
      <el-tab-pane label="邀请记录">
        <InviteRecordList/>
      </el-tab-pane>
    </el-tabs>
  </div>

</div>
</template>

<style scoped lang="less">

.user-info{
  padding: 20px;
  height: 100%;
  border-radius: 10px;
  background-color: var(--el-bg-color-overlay);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

</style>